<template>
  <!-- 消防设施 -- 消防器材 -->
  <view class="fireFightingEquipment">
    <view class="wrapper">
      <view class="wrapper-item">
        <view style="background: #fff">
          <u-cell
            :titleStyle="titleStyle"
            title="是否有消防器材"
            clickable
            isLink
            :rightIconStyle="rightIconStyle"
            @click="cellClick('text', 'onFireTool')"
          >
            <view
              slot="value"
              :class="form.onFireToolDesc ? 'cell-noEmpty' : 'cell-empty'"
            >
              {{ form.onFireToolDesc || "请选择" }}
            </view>
          </u-cell>
        </view>

        <block v-if="hotelDeviceDetailList.length">
          <view
            v-for="(item, i) in hotelDeviceDetailList"
            :key="i"
            class="nape-item"
            :style="{
              borderBottom: i + 1 != item.length ? '1px solid #e6e6e6' : '',
            }"
          >
            <view class="nape-left">
              <image
                :src="baseImgUrl + 'dele-icon.png'"
                class="deleClass"
                @click="deleteHandle(i)"
                mode="aspectFill"
              ></image>
              <image
                :src="imgPrefix + item.deviceImage"
                mode="aspectFill"
              ></image>
            </view>
            <view class="wrapper-facility" style="margin-left: 20rpx">
              <view class="facility-item">
                <view class="textAlign label">器材类型：</view>
                <view class="value valueName">
                  {{ item.deviceTypeDesc || "" }}
                </view>
              </view>
              <view class="facility-item">
                <view class="textAlign label">器材编号：</view>
                <view class="value valueName">
                  {{ item.deviceNo || "" }}
                </view>
              </view>
              <view class="facility-item">
                <view class="textAlign label">器材数量：</view>
                <view class="value valueName">
                  {{ item.deviceCount || "" }}
                </view>
              </view>
              <view class="facility-item">
                <view class="textAlign label">过期时间：</view>
                <view class="value valueName">
                  {{ item.expirationTimeName || "" }}
                </view>
              </view>
            </view>
          </view>
        </block>

        <block v-if="form.onFireTool == 1">
          <view
            class="addFile"
            :data-url="`/securityInfor/fireProtection/addFireFighting`"
            @click="handleClickRouter"
          >
            + 添加消防器材
          </view>
        </block>
      </view>
    </view>

    <view class="btns">
      <button class="reset-btn lt cancelBtn" type="primary" @click="navBack()">
        取消
      </button>
      <button class="submit-btn" type="primary" @click="sunmitHandle">
        保存
      </button>
    </view>

    <u-picker
      v-if="pickerShow"
      :show="pickerShow"
      :columns="columns"
      :keyName="keyName"
      @confirm="showConfirm"
      @close="pickerClose"
      @cancel="pickerCancel"
      :closeOnClickOverlay="true"
    ></u-picker>
  </view>
</template>

<script>
import { publicSecurityDetail, publicSecuritySave } from "@/api/home.js";
import { findEnableDictItemsbyCode } from "@/api/api.js";
import {
  handleClickRouter,
  Toast,
  navBack,
  dayTurnTime,
  formatters,
} from "@/utils/util.js";
import mixin from "@/utils/mixin.js";

export default {
  name: "fireFightingEquipment",
  mixins: [mixin],
  data() {
    return {
      baseImgUrl: this.$baseImgUrl,
      baseURL: this.$baseURL,
      form: {},
      errorType: ["none"],
      options: {},
      imgPrefix: uni.getStorageSync("imgPrefix"),
      hotelDeviceDetailList: [], //设备信息
    };
  },
  onLoad(options) {
    uni.removeStorageSync("hotelDeviceDetailList");
    this.options = options;
    this.getList();
  },
  onShow() {
    this.hotelDeviceDetailList =
      uni.getStorageSync("hotelDeviceDetailList") || [];
  },
  methods: {
    handleClickRouter,
    navBack,
    /* cell 点击 */
    cellClick(name, type) {
      this.keyName = name;
      this.cellType = type;
      let code = "";
      switch (this.cellType) {
        case "onFireTool":
          code = "on_type";
          break;
        default:
          break;
      }

      findEnableDictItemsbyCode(code).then((res) => {
        this.columns[0] = res.result || [];
        this.pickerShow = true;
      });
    },
    /* 选择器 确定 */
    showConfirm(e) {
      let arr = e.value;
      if (arr.length) {
        let obj = arr[0];
        switch (this.cellType) {
          case "onFireTool":
            this.form.onFireTool = obj.value;
            this.form.onFireToolDesc = obj.title;

            if (obj.value != 1) {
              uni.removeStorageSync("hotelDeviceDetailList");
              this.hotelDeviceDetailList = [];
            }
            break;
          default:
            break;
        }
      }
      this.pickerShow = false;
    },
    // 删除
    deleteHandle(i) {
      this.hotelDeviceDetailList.splice(i, 1);
      uni.setStorageSync("hotelDeviceDetailList", this.hotelDeviceDetailList);
    },
    sunmitHandle() {
      let { onFireTool } = this.form;

      // 1：有    0：无
      if (!onFireTool) {
        Toast("请选择是否有消防器材");
        return;
      }

      if (onFireTool == 1) {
        if (!this.hotelDeviceDetailList.length) {
          Toast("请添加消防器材");
          return;
        }
      }

      let data = {
        companyMessageId: this.options.companyId,
        fireToolInfo: {
          onFireTool: onFireTool,
          pathList: this.hotelDeviceDetailList,
        },
      };

      publicSecuritySave(data).then((res) => {
        if (res.code == 200) {
          Toast("保存成功");
          navBack();
        }
      });
    },
    deviceTypeHandle(value) {
      let { public_device_type } = uni.getStorageSync("allCode");
      for (var v of public_device_type) {
        if (v.value == value) {
          return v.text;
        }
      }
    },
    getList() {
      publicSecurityDetail({ companyId: this.options.companyId }).then(
        (res) => {
          if (res.code == 200) {
            if (Object.keys(res.result).length == 0) return false;

            let { fireToolInfo } = res.result;
            console.log(fireToolInfo, "返回的数据");
            if (fireToolInfo.onFireTool != null) {
              this.form = fireToolInfo;
              this.form.onFireTool = fireToolInfo.onFireTool.toString();

              if (this.form.onFireTool == 1) {
                this.hotelDeviceDetailList = fireToolInfo.pathList.map((v) => ({
                  id: v.id,
                  deviceImage: v.deviceImage,
                  deviceType: v.deviceType,
                  deviceTypeDesc: this.deviceTypeHandle(v.deviceType),
                  deviceNo: v.deviceNo,
                  deviceCount: v.deviceCount,
                  expirationTime: v.expirationTime
                    ? dayTurnTime(v.expirationTime)
                    : "",
                  expirationTimeName: v.expirationTime
                    ? formatters(
                        dayTurnTime(dayTurnTime(v.expirationTime)),
                        "YY/MM/DD"
                      )
                    : "",
                }));
                console.log(this.hotelDeviceDetailList, "转换");

                uni.setStorageSync(
                  "hotelDeviceDetailList",
                  this.hotelDeviceDetailList
                );
              }

              let { on_type } = uni.getStorageSync("allCode");
              on_type.map((v) => {
                if (v.value == fireToolInfo.onFireTool) {
                  this.form.onFireToolDesc = v.text;
                }
              });
            }
          }
        }
      );
    },
  },
};
</script>

<style>
page {
  background-color: #f3f3f3 !important;
  height: 100%;
}
</style>
<style lang="scss" scoped>
.fireFightingEquipment {
  flex: 1;
  background: #f9f9f9;

  .wrapper {
    height: calc(100vh - 92px);
    margin: 20rpx;
    overflow-y: auto;

    .wrapper-item {
      padding: 20rpx;
      margin-bottom: 20rpx;

      .addFile {
        margin-top: 15rpx;
        padding: 35rpx 0;
        text-align: center;
        color: #2488f5;
        font-size: 28rpx;
        font-weight: 500;
        background: #fff;
      }
    }

    .nape-item {
      display: flex;
      padding: 25rpx 25rpx 5rpx;
      background: #fff;

      .nape-left {
        position: relative;

        image {
          width: 200rpx;
          height: 200rpx;
        }

        .deleClass {
          position: absolute;
          top: -10px;
          right: -8px;
          width: 36rpx;
          height: 36rpx;
        }
      }
    }
  }

  .btns {
    button {
      border-radius: 44rpx;
    }
  }
}
</style>
